<template>
	<view class="container" @click="skip(`/pages/dotDetails/dotDetails`)">
		<image class="dot_img"  src="@/static/dotDetails/details_bg02.png" mode="aspectFill"></image>
		<view class="dot_info">
			<view class="container_t">
				<view class="container_t_c">
					<view class="container_t_c1">新悦香港茶餐厅笋岗街道梨园路8号HALO</view>
					<view class="container_t_c2">
						<image src="@/static/dotIntro/outlets_icon02.png" mode="aspectFill"></image>
						<view>周一至周日 00:00-00:00</view>
					</view>
					<view class="container_t_c3">
						<image src="@/static/dotIntro/outlets_icon01.png" mode="aspectFill"></image>
						<view>笋岗街道梨园路8号HALO笋岗街道梨园路8号HALO</view>
					</view>
				</view>
				<view class="top_c_right">
					<view class="jh">
						<image class="bg" src="../../static/dotIntro/outlets_but01.png" mode="aspectFill"></image>
						<view class="con" @click="scanCode()">
							<image class="con_img" src="../../static/index/home_but05.png" mode="aspectFill"></image>
							<view class="con_t">借还</view>
						</view>
					</view>
					<view class="dh" @click="handleMapLocation()">
						<image class="dh_img" src="../../static/dotIntro/outlets_but04.png" mode="aspectFill"></image>
						<view>导航</view>
					</view>
				</view>
				
			</view>
			<view class="line"></view>
			<view class="container_b">
				<view class="container_b_item">
					<image class="apple" src="@/static/dotIntro/outlets_icon03.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="android" src="@/static/dotIntro/outlets_icon04.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="type-c" src="@/static/dotIntro/outlets_icon05.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="yes" src="@/static/dotIntro/outlets_icon06.png" mode="aspectFilla"></image>
					<view>可归还 卡槽充足</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	// 扫码
	function scanCode() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}
	
	// 导航
	function handleMapLocation() {
		uni.openLocation({
			latitude: 22.536,
			longitude: 113.956,
		})
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	
	.container {
		width: 710rpx;
		height: fit-content;
		border-radius: 10rpx;
		background: #ffffff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		margin: 0 auto;
		overflow: hidden;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		
		.dot_img {
			width: 710rpx;
			height: 410rpx;
		}
		
		.dot_info {
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			
			.container_t {
				width: 100%;
				display: flex;
				
				.container_t_c {
					width: 510rpx;
					display: flex;
					flex-direction: column;
					
					.container_t_c1 {
						font-size: 15px;
						letter-spacing: 2px;
						color: #000000;
						font-weight: bold;
					}
					
					.container_t_c2 {
						display: flex;
						align-items: center;
						font-size: 10px;
						letter-spacing: 1px;
						color: #606060;
						margin-top: 30rpx;
						
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 11rpx;
						}
					}
					
					.container_t_c3 {
						display: flex;
						align-items: center;
						font-size: 10px;
						letter-spacing: 1px;
						color: #606060;
						margin-top: 24rpx;
						
						image {
							width: 16rpx;
							height: 22rpx;
							margin-right: 13rpx;
							flex-shrink: 0;
						}
					}
				}
				
				.top_c_right {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: auto;
				
					.jh {
						width: 128rpx;
						height: 128rpx;
						position: relative;
				
						.bg {
							width: 100%;
							height: 100%;
						}
				
						.con {
							width: 100%;
							height: 100%;
							position: absolute;
							inset: 0;
							display: flex;
							flex-direction: column;
							align-items: center;
				
							.con_img {
								width: 42rpx;
								height: 42rpx;
								margin-top: 20rpx;
							}
				
							.con_t {
								font-size: 12px;
								color: #fff;
								letter-spacing: 1px;
								margin-top: 4rpx;
							}
						}
					}
				
					.dh {
						width: 106rpx;
						height: 42rpx;
						background-color: #606060;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 1px;
						color: #ffffff;
						font-size: 12px;
				
						.dh_img {
							width: 18rpx;
							height: 20rpx;
							margin-right: 5rpx;
						}
					}
				}
			}
			
			.line {
				width: 100%;
				height: 1rpx;
				background-color: #cbcbcb;
				margin-top: 38rpx;
			}
			
			.container_b {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				justify-content: space-around;
				
				.container_b_item {
					display: flex;
					align-items: center;
					letter-spacing: 1px;
					color: #000000;
					font-size: 10px;
					
					.apple {
						width: 22rpx;
						height: 27rpx;
						margin-right: 5rpx;
					}
					
					.android {
						width: 22rpx;
						height: 25rpx;
						margin-right: 5rpx;
					}
					
					.type-c {
						width: 22rpx;
						height: 23rpx;
						margin-right: 5rpx;
					}
					
					.yes {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>